<template>
	<div class="assetAdminEntry" v-loading="assetAdminEntryLoading">
		<div class="entryForm">
      <el-form ref="entryForm" :model="entryForm" :rules="entryFormRules" size="mini" inline>
				<div class="title">站房信息</div>

				<el-form-item label=站房名称 label-width="85px" prop="stationName">
					<el-select v-model="entryForm.stationName" placeholder="请选择水站名称" @change="stationSelChange">
						<p v-for="(item, index) of stationList" :key="index">
							<el-option :label="item" :value="item"></el-option>
						</p>
					</el-select>
				</el-form-item>
				<el-form-item label="站房地址" label-width="100px"  prop="stationAddress">
          <el-input v-model="entryForm.stationAddress" disabled></el-input>
				</el-form-item>
				<el-form-item label="管理人员" label-width="100px"  prop="stationManager">
          <el-input v-model="entryForm.stationManager" disabled></el-input>
				</el-form-item>

				<div class="title">配套系统</div>
				<el-row class="systemRow">
					<p class="formItemTit">采配水系统：</p>
					<el-form-item label="编号：">
						<el-input v-model="entryForm.distributionSystem.systemName" ></el-input>
					</el-form-item>
					<el-form-item label="规格型号：">
						<el-input v-model="entryForm.distributionSystem.systemModel" ></el-input>
					</el-form-item>
					<el-form-item label="数量：">
						<el-input v-model="entryForm.distributionSystem.systemNum" ></el-input>
					</el-form-item>
					<el-form-item label="品牌：">
						<el-input v-model="entryForm.distributionSystem.systemBrand" ></el-input>
					</el-form-item>
				</el-row>
				<el-row class="systemRow">
					<p class="formItemTit">预处理系统：</p>
					<el-form-item label="编号：">
						<el-input v-model="entryForm.pretreatmentSystem.systemName" ></el-input>
					</el-form-item>
					<el-form-item label="规格型号：">
						<el-input v-model="entryForm.pretreatmentSystem.systemModel" ></el-input>
					</el-form-item>
					<el-form-item label="数量：">
						<el-input v-model="entryForm.pretreatmentSystem.systemNum" ></el-input>
					</el-form-item>
					<el-form-item label="品牌：">
						<el-input v-model="entryForm.pretreatmentSystem.systemBrand" ></el-input>
					</el-form-item>
				</el-row>
				<el-row class="systemRow">
					<p class="formItemTit">仪器仪表：</p>
					<el-form-item label="编号：">
						<el-input v-model="entryForm.instrumentation.systemName" ></el-input>
					</el-form-item>
					<el-form-item label="规格型号：">
						<el-input v-model="entryForm.instrumentation.systemModel" ></el-input>
					</el-form-item>
					<el-form-item label="数量：">
						<el-input v-model="entryForm.instrumentation.systemNum" ></el-input>
					</el-form-item>
					<el-form-item label="品牌：">
						<el-input v-model="entryForm.instrumentation.systemBrand" ></el-input>
					</el-form-item>
				</el-row>
				<el-row class="systemRow">
					<p class="formItemTit">控制系统：</p>
					<el-form-item label="编号：">
						<el-input v-model="entryForm.controlSystem.systemName" ></el-input>
					</el-form-item>
					<el-form-item label="规格型号：">
						<el-input v-model="entryForm.controlSystem.systemModel" ></el-input>
					</el-form-item>
					<el-form-item label="数量：">
						<el-input v-model="entryForm.controlSystem.systemNum" ></el-input>
					</el-form-item>
					<el-form-item label="品牌：">
						<el-input v-model="entryForm.controlSystem.systemBrand" ></el-input>
					</el-form-item>
				</el-row>
				<el-row class="systemRow">
					<p class="formItemTit">空调：</p>
					<el-form-item label="编号：">
						<el-input v-model="entryForm.airConditioning.systemName" ></el-input>
					</el-form-item>
					<el-form-item label="规格型号：">
						<el-input v-model="entryForm.airConditioning.systemModel" ></el-input>
					</el-form-item>
					<el-form-item label="数量：">
						<el-input v-model="entryForm.airConditioning.systemNum" ></el-input>
					</el-form-item>
					<el-form-item label="品牌：">
						<el-input v-model="entryForm.airConditioning.systemBrand" ></el-input>
					</el-form-item>
				</el-row>
      </el-form>
    </div>
		<div class="mhr"></div>
		<div class="consumablesTable">
			<div class="title">备件耗材
				<span class="formAddBtn">
          <!-- <el-button class="greenBtn" size="mini" @click="addInput(['consumableNumber', 'systemName', 'systemNum', 'systemModel', 'systemBrand'])">新增一项</el-button> -->
          <el-button class="greenBtn" size="mini" @click="addInput(['systemName', 'systemNum', 'systemModel', 'systemBrand'])">新增一项</el-button>
          <el-button size="mini" @click="delInput">删除最后一项</el-button>
        </span>
			</div>
			<el-table :data="consumablesTable" size="small" border
        :header-cell-style="{color: '#292929', backgroundColor: '#f1f1f1', borderTop: '1px solid #EBEEF5'}"
      >
        <!-- <el-table-column
          prop="consumableNumber"
          label="编号"
          align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.consumableNumber" placeholder="请输入编号" size="mini"></el-input>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="systemName"
          label="名称"
          align="center">
					<template slot-scope="scope">
						<el-select v-model="scope.row.systemName" style="width: 100%" size="mini" placeholder="请选择名称">
							<p v-for="(item, index) of stationConsumable" :key="index">
								<el-option :label="item" :value="item"></el-option>
							</p>
						</el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="systemNum"
          label="数量"
          align="center">
					<template slot-scope="scope">
						<!-- <el-input v-model="scope.row.systemNum" placeholder="请输入数量" size="mini"></el-input> -->
            <el-input-number v-model="scope.row.systemNum" :min="0" size="mini"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          prop="systemModel"
          label="规格类型"
          align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.systemModel" placeholder="请输入规格类型" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="systemBrand"
          label="品牌"
          align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.systemBrand" placeholder="请输入品牌" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          align="center">
					<template slot-scope="scope">
            <el-select v-model="scope.row.type" style="width: 100%" placeholder="请选择类型" size="mini">
              <el-option label="试剂" value="试剂"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
		</div>
		<div class="btnBox">
			<el-button type="primary" class="greenBtn" size="mini" @click="onSubmit('entryForm')">确定</el-button>
		</div>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import common from '@/plugins/common'
export default {
  name: 'assetAdminEntry',
  data () {
    return {
			msg: 'hello assetAdminEntry!',
			assetAdminEntryLoading: false,
			entryForm: {
				stationName: '',
				stationAddress: '',
				stationManager: '',
				distributionSystem: {
					systemName: '',
					systemModel: '',
					systemNum: '',
					systemBrand: '',
				},
				pretreatmentSystem: {
					systemName: '',
					systemModel: '',
					systemNum: '',
					systemBrand: '',
				},
				instrumentation: {
					systemName: '',
					systemModel: '',
					systemNum: '',
					systemBrand: '',
				},
				controlSystem: {
					systemName: '',
					systemModel: '',
					systemNum: '',
					systemBrand: '',
				},
				airConditioning: {
					systemName: '',
					systemModel: '',
					systemNum: '',
					systemBrand: '',
				},
			},
			entryFormRules: {
        stationName: [
          { required: true, message: '请选择水站名称', trigger: 'blur' }
        ],
      },
			consumablesTable: [
				{
					// consumableNumber: '',
					systemName: '',
					systemNum: '',
					systemModel: '',
          systemBrand: '',
          type: "",
				},
			]
		}
  },
	methods: {
		...mapActions([
			'fetchAssetStationManager',
			'fetchAssetConsumable',
			'postAssetAdminEntry'
		]),
		stationSelChange(val) {
			let curStation = this.stationManagers.find(v => v.stationName === val)
			if(curStation) {
				this.entryForm.stationAddress = curStation.stationAddress
				this.entryForm.stationManager = curStation.stationManager
			}else {
				// this.entryForm.stationAddress = this.entryForm.stationManager = '暂无'
				this.entryForm.stationAddress = this.entryForm.stationManager = ''
			}
		},
		addInput(newInput) {
      let group = this.consumablesTable
      let newitem = {}
      newInput.map((item) => {
        newitem[item] = ''
      })
      group.push(newitem)
    },
    delInput() {
      let group = this.consumablesTable
      if(group.length > 1) {
        group.splice(-1)
      }
		},
		mapIsEmpty(object) {
			let newObj = common.deepClone(object)
			for(let i in newObj) {
				if(newObj[i] === '') {
					newObj[i] = null
				}
			}
			let index = Object.values(newObj).findIndex(v => v !== null)
			return index < 0 ? null : newObj
		},
		onSubmit(formName) {
			
			this.$refs[formName].validate(async (valid) => {
        if(valid) {
					this.assetAdminEntryLoading = true
					let form = this.entryForm
					// let consumablesTable = this.consumablesTable
					let param = {
						stationName: form.stationName,
						stationAddress: form.stationAddress,
						stationManager: form.stationManager,
						distributionSystem: this.mapIsEmpty(form.distributionSystem),
						pretreatmentSystem: this.mapIsEmpty(form.pretreatmentSystem),
						instrumentation: this.mapIsEmpty(form.instrumentation),
						controlSystem: this.mapIsEmpty(form.controlSystem),
						airConditioning: this.mapIsEmpty(form.airConditioning),
						consumable: this.consumablesTable.map(v => this.mapIsEmpty(v)),
					}
					let result = await this.postAssetAdminEntry(param)
					if(result.message != 'success') {
						this.$notify.warning({
              title: '警告',
              message: result.info,
            })
            this.assetAdminEntryLoading = false
            return
					}
					this.$notify.success({
            title: '成功',
            message: '资产录入成功!',
          })
          this.$router.push('/assetAdmin/list')
        }else {
          return false;
        }
      })
		},
	},
	async created() {
		this.assetAdminEntryLoading = true
		await this.fetchAssetStationManager()
		await this.fetchAssetConsumable()
		this.assetAdminEntryLoading = false
	},
	computed: {
    ...mapGetters({
			stationManagers: 'getStationManagers',
			stationConsumable: 'getStationConsumable',
			stationList: 'getStationList',
    })
  },
}
</script>
<style scoped>
.assetAdminEntry {
	position: relative;
	padding: 0 20px 0 20px;
  min-height: 100%;
	background: #fff;
}
.assetAdminEntry .title {
	position: relative;
	left: 16px;
  line-height: 70px;
  font-size: 16px;
}
.assetAdminEntry .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.assetAdminEntry .mhr {
	position: relative;
	left: -20px;
	height: 15px;
	width: calc(100% + 40px);
	background: #f2f2f2;
}
.entryForm {
	margin-bottom: 10px;
}
.entryForm .formItemTit {
	font-weight: bold;
	margin-bottom: 5px;
}
.entryForm .systemRow {
	padding-left: 15px;
	margin-bottom: 10px;
}
.btnBox {
	padding: 15px 0;
}
</style>